<style scoped lang="sass">
.circle-progress
  display: inline-block
  .progress
    -webkit-transition: all ease-out .8s;
    transition: all ease-out .8s;
</style>

<template lang="jade">
.circle-progress
  svg(v-if="~['active', 'paused'].indexOf(displayStatus)", :width="size", :height="size", :viewbox="'0 0 ' + size + ' ' + size", version="1.1", xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink", fill="none")
    circle(:cx="size/2", :cy="size/2", :r="(size-lineWidth)/2", :stroke="colors.bg", :stroke-width="lineWidth")
    circle.progress(:cx="size/2", :cy="size/2", :r="(size-lineWidth)/2", transform="translate(10, 10) rotate(-90) translate(-10, -10)", :stroke-width="lineWidth", :stroke="progressColor", :style="{'stroke-dasharray': totalPoints, 'stroke-dashoffset': progressPoints}")
    path.pause-icon(v-if="displayStatus === 'paused'", :fill="colors.bg", :transform="'scale('+size/20+')'", d="M13,7.25 L13,12.75 C13,12.8177087 12.9752607,12.8763018 12.9257812,12.9257812 C12.8763018,12.9752607 12.8177087,13 12.75,13 L10.75,13 C10.6822913,13 10.6236982,12.9752607 10.5742188,12.9257812 C10.5247393,12.8763018 10.5,12.8177087 10.5,12.75 L10.5,7.25 C10.5,7.18229133 10.5247393,7.12369816 10.5742188,7.07421875 C10.6236982,7.02473934 10.6822913,7 10.75,7 L12.75,7 C12.8177087,7 12.8763018,7.02473934 12.9257812,7.07421875 C12.9752607,7.12369816 13,7.18229133 13,7.25 L13,7.25 Z M9.5,7.25 L9.5,12.75 C9.5,12.8177087 9.47526066,12.8763018 9.42578125,12.9257812 C9.37630184,12.9752607 9.31770867,13 9.25,13 L7.25,13 C7.18229133,13 7.12369816,12.9752607 7.07421875,12.9257812 C7.02473934,12.8763018 7,12.8177087 7,12.75 L7,7.25 C7,7.18229133 7.02473934,7.12369816 7.07421875,7.07421875 C7.12369816,7.02473934 7.18229133,7 7.25,7 L9.25,7 C9.31770867,7 9.37630184,7.02473934 9.42578125,7.07421875 C9.47526066,7.12369816 9.5,7.18229133 9.5,7.25 L9.5,7.25 Z")
  svg(v-if="displayStatus === 'complete'", :width="size", :height="size", :viewbox="'0 0 ' + size + ' ' + size", version="1.1", xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink", fill="none")
    g(:transform="'scale('+size/20+')'")
      circle(:fill="colors.primary", cx="10", cy="10", r="10")
      path(d="M16.0546875,7.421875 C16.0546875,7.63020937 15.9817716,7.80729094 15.8359375,7.953125 L10.1796875,13.609375 L9.1171875,14.671875 C8.97135344,14.8177091 8.79427187,14.890625 8.5859375,14.890625 C8.37760313,14.890625 8.20052156,14.8177091 8.0546875,14.671875 L6.9921875,13.609375 L4.1640625,10.78125 C4.01822844,10.6354159 3.9453125,10.4583344 3.9453125,10.25 C3.9453125,10.0416656 4.01822844,9.86458406 4.1640625,9.71875 L5.2265625,8.65625 C5.37239656,8.51041594 5.54947813,8.4375 5.7578125,8.4375 C5.96614687,8.4375 6.14322844,8.51041594 6.2890625,8.65625 L8.5859375,10.9609375 L13.7109375,5.828125 C13.8567716,5.68229094 14.0338531,5.609375 14.2421875,5.609375 C14.4505219,5.609375 14.6276034,5.68229094 14.7734375,5.828125 L15.8359375,6.890625 C15.9817716,7.03645906 16.0546875,7.21354063 16.0546875,7.421875 L16.0546875,7.421875 Z", fill="#FFFFFF")
  svg(v-if="displayStatus === 'uploading'", :width="size", :height="size", :viewbox="'0 0 ' + size + ' ' + size", version="1.1", xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink", fill="none")
    g(:transform="'scale('+size/20+')'")
      circle(:fill="colors.primary", cx="10", cy="10", r="10")
      path(d='M14.5348547,10.4484884 L11.8106105,10.4484884 L11.8148205,14.5448607 C11.8148205,14.6772899 11.7722547,14.7860694 11.6871216,14.8712024 C11.6019885,14.9563355 11.493209,14.9989014 11.3607798,15.0019185 L8.63653564,14.9989014 C8.50410644,14.9989014 8.39532695,14.9563355 8.31019389,14.8712024 C8.22506083,14.7860694 8.18249494,14.6772899 8.18249494,14.5448607 L8.1782849,10.4484884 L5.4540407,10.4484884 C5.3216115,10.4484884 5.212832,10.4059225 5.12769895,10.3207895 C5.04256589,10.2356564 5,10.1268769 5,9.9944477 C5,9.88093696 5.04729543,9.76742792 5.14188772,9.65391718 L9.66810595,5.12769895 C9.77215746,5.04256589 9.88093696,5 9.9944477,5 C10.1079584,5 10.2167379,5.04256589 10.3207895,5.12769895 L14.8611965,9.66810595 C15.0030849,9.81945361 15.0361917,9.98498762 14.9605179,10.164713 C14.884844,10.3538975 14.7429577,10.4484884 14.5348547,10.4484884 Z', fill='#FFFFFF')
  svg(v-if="displayStatus === 'waiting'", :width="size", :height="size", :viewbox="'0 0 ' + size + ' ' + size", version="1.1", xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink", fill="none")
    circle(:cx="size/2", :cy="size/2", :r="(size-lineWidth)/2", :stroke="colors.primary", :stroke-width="lineWidth")
    path(:fill="colors.primary", :transform="'scale('+size/20+')'", d='M11,5.41666667 L11,11.25 C11,11.3715284 10.9609379,11.4713538 10.8828125,11.5494792 C10.8046871,11.6276046 10.7048617,11.6666667 10.5833333,11.6666667 L6.41666667,11.6666667 C6.29513828,11.6666667 6.19531289,11.6276046 6.1171875,11.5494792 C6.03906211,11.4713538 6,11.3715284 6,11.25 L6,10.4166667 C6,10.2951383 6.03906211,10.1953129 6.1171875,10.1171875 C6.19531289,10.0390621 6.29513828,10 6.41666667,10 L9.33333333,10 L9.33333333,5.41666667 C9.33333333,5.29513828 9.37239544,5.19531289 9.45052083,5.1171875 C9.52864622,5.03906211 9.62847161,5 9.75,5 L10.5833333,5 C10.7048617,5 10.8046871,5.03906211 10.8828125,5.1171875 C10.9609379,5.19531289 11,5.29513828 11,5.41666667 L11,5.41666667 Z')
  svg(v-if="displayStatus === 'error'", :width="size", :height="size", :viewbox="'0 0 ' + size + ' ' + size", version="1.1", xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink", fill="none")
    path(:fill="colors.error", :transform="'scale('+size/20+')'", d='M10,0 C11.8142452,0 13.4874055,0.447044141 15.0195312,1.34114583 C16.551657,2.23524753 17.7647525,3.44834303 18.6588542,4.98046875 C19.5529559,6.51259447 20,8.18575482 20,10 C20,11.8142452 19.5529559,13.4874055 18.6588542,15.0195312 C17.7647525,16.551657 16.551657,17.7647525 15.0195312,18.6588542 C13.4874055,19.5529559 11.8142452,20 10,20 C8.18575482,20 6.51259447,19.5529559 4.98046875,18.6588542 C3.44834303,17.7647525 2.23524753,16.551657 1.34114583,15.0195312 C0.447044141,13.4874055 0,11.8142452 0,10 C0,8.18575482 0.447044141,6.51259447 1.34114583,4.98046875 C2.23524753,3.44834303 3.44834303,2.23524753 4.98046875,1.34114583 C6.51259447,0.447044141 8.18575482,0 10,0 L10,0 Z M11.6666667,16.2369792 L11.6666667,13.7630208 C11.6666667,13.6414924 11.6276046,13.5394969 11.5494792,13.4570312 C11.4713538,13.3745656 11.3758686,13.3333333 11.2630208,13.3333333 L8.76302083,13.3333333 C8.65017305,13.3333333 8.55034766,13.3767357 8.46354167,13.4635417 C8.37673568,13.5503477 8.33333333,13.650173 8.33333333,13.7630208 L8.33333333,16.2369792 C8.33333333,16.349827 8.37673568,16.4496523 8.46354167,16.5364583 C8.55034766,16.6232643 8.65017305,16.6666667 8.76302083,16.6666667 L11.2630208,16.6666667 C11.3758686,16.6666667 11.4713538,16.6254344 11.5494792,16.5429687 C11.6276046,16.4605031 11.6666667,16.3585076 11.6666667,16.2369792 L11.6666667,16.2369792 Z M11.640625,11.7578125 L11.875,3.671875 C11.875,3.56770781 11.8315977,3.48958359 11.7447917,3.4375 C11.6579857,3.36805521 11.5538201,3.33333333 11.4322917,3.33333333 L8.56770833,3.33333333 C8.44617995,3.33333333 8.34201432,3.36805521 8.25520833,3.4375 C8.16840234,3.48958359 8.125,3.56770781 8.125,3.671875 L8.34635417,11.7578125 C8.34635417,11.8446185 8.38975651,11.9205726 8.4765625,11.9856771 C8.56336849,12.0507816 8.66753411,12.0833333 8.7890625,12.0833333 L11.1979167,12.0833333 C11.3194451,12.0833333 11.4214406,12.0507816 11.5039062,11.9856771 C11.5863719,11.9205726 11.6319444,11.8446185 11.640625,11.7578125 L11.640625,11.7578125 Z')
  svg(v-if="displayStatus === 'removed'", :width="size", :height="size", :viewbox="'0 0 ' + size + ' ' + size", version="1.1", xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink", fill="none")
    path(:fill="colors.bg", :transform="'scale('+size/20+')'", d='M15.8333333,10.8333333 L15.8333333,9.16666667 C15.8333333,8.94097109 15.7508689,8.74566055 15.5859375,8.58072917 C15.4210061,8.41579779 15.2256956,8.33333333 15,8.33333333 L5,8.33333333 C4.77430443,8.33333333 4.57899388,8.41579779 4.4140625,8.58072917 C4.24913112,8.74566055 4.16666667,8.94097109 4.16666667,9.16666667 L4.16666667,10.8333333 C4.16666667,11.0590289 4.24913112,11.2543395 4.4140625,11.4192708 C4.57899388,11.5842022 4.77430443,11.6666667 5,11.6666667 L15,11.6666667 C15.2256956,11.6666667 15.4210061,11.5842022 15.5859375,11.4192708 C15.7508689,11.2543395 15.8333333,11.0590289 15.8333333,10.8333333 L15.8333333,10.8333333 Z M20,10 C20,11.8142452 19.5529559,13.4874055 18.6588542,15.0195312 C17.7647525,16.551657 16.551657,17.7647525 15.0195312,18.6588542 C13.4874055,19.5529559 11.8142452,20 10,20 C8.18575482,20 6.51259447,19.5529559 4.98046875,18.6588542 C3.44834303,17.7647525 2.23524753,16.551657 1.34114583,15.0195312 C0.447044141,13.4874055 0,11.8142452 0,10 C0,8.18575482 0.447044141,6.51259447 1.34114583,4.98046875 C2.23524753,3.44834303 3.44834303,2.23524753 4.98046875,1.34114583 C6.51259447,0.447044141 8.18575482,0 10,0 C11.8142452,0 13.4874055,0.447044141 15.0195312,1.34114583 C16.551657,2.23524753 17.7647525,3.44834303 18.6588542,4.98046875 C19.5529559,6.51259447 20,8.18575482 20,10 L20,10 Z')


</template>

<script>
export default {
  data () {
    return {
      size: 20,
      lineWidth: 3,
      colors: {
        primary: '#37B963',
        bg: '#D8D8D8',
        dark: '#979797',
        error: '#E74D3D'
      }
    }
  },
  props: {
    progress: Number,
    status: String
  },
  computed: {
    displayStatus: function () {
      if (this.status === 'complete' || (this.status === 'paused' && this.progress === 1)) {
        return 'complete'
      } else if (this.status === 'active' && this.progress === 1) {
        return 'uploading'
      } else if (this.status === 'active') {
        return 'active'
      } else if (this.status === 'waiting') {
        return 'waiting'
      } else if (this.status === 'paused') {
        return 'paused'
      } else if (this.status === 'error') {
        return 'error'
      } else if (this.status === 'removed') {
        return 'removed'
      }
    },
    progressColor: function () {
      return this.status === 'active' ? this.colors.primary : this.colors.dark
    },
    totalPoints: function () {
      return (this.size - this.lineWidth) * Math.PI
    },
    progressPoints: function () {
      return (1 - this.progress) * this.totalPoints
    }
  }
}
</script>
